const todoList = [{
    id:123,
    title:'上班打卡',
    status:'Waiting'}, {
    id:124,
    title:'敲代码',
    status:'Doing'},{
    id:125,
    title:'运行',
    status:'Finished'},{
    id:126,
    title:'下班打卡',
    status:'Waiting'},
]

const myUL =document.getElementById('myUL')
const addBtn = document.getElementById('addBtn')
const myInput = document.getElementById('myInput')
let status = "全部"
const showList = ()=> {
    myUL.innerHTML="";
    const list = todoList.filter(todo => status ==="全部" || todo.status===status)
    list.forEach((todo,index) =>{
        const li =
            `<li id="${ index }"><span class=" ${todo.status}" > ${todo.status} </span> | ${todo.title}<span id="${todo.id}" class="close">x</span></li>`;
        myUL.innerHTML += li;
    })

    const spans=document.querySelectorAll("#myUL li span");
    spans.forEach( span =>{
        span.onclick= _=> {
            const index =todoList.findIndex(todo => todo.id ===span.id)
            todoList.splice(index,1);
            showList()
        }
    })
    const lis = document.querySelectorAll("#myUL li")
    lis.forEach(li =>{
        li.onclick= e =>{
        const todo = todoList[parseInt(li.id)];
        if(todo.status==='Waiting'){
            todo.status = 'Doing'
        }else if(todo.status==='Doing'){
            todo.status = 'Finished'
        }
        showList()
    }
    })
}
(_ => {
    addBtn.onclick = e=>{
        if(!myInput.value || myInput.value===''){
            alert("请重新输入")
        }
        const todo = {
            id:new Date().getTime(),
            title:myInput.value,
             status:'Waiting'
        }
        todoList.unshift(todo)
        showList()
    }
    const radios = document.querySelectorAll("#radio-status input")
    radios.forEach(radio =>{
        radio.onclick = e=>{
            status = e.target.value
            showList()
        }
    })
    showList();
})()
